import {ActivityIndicator, Text, View} from 'react-native';
import React from 'react';
import {TextInput} from 'react-native-gesture-handler';
import ColorButton from '../components/ColorButton';
import {useResponsive} from 'react-native-responsive-hook';

export default function NumberInputView(props) {
  const {wp, hp, rem} = useResponsive();
  const [value, setValue] = React.useState('1');
  return (
    <View
      style={{
        width: wp(70),
        height: 250,
        backgroundColor: 'white',
        padding: 10,
        borderRadius: 10,
        alignItems: 'stretch',
        justifyContent: 'space-around',
      }}>
      <Text style={{fontSize: rem(10), textAlign: 'center'}}>
        请输入预约数量
      </Text>
      <TextInput
        style={{
          height: hp(4),
          borderRadius: hp(2),
          borderWidth: 1,
          width: '100%',
          textAlign: 'center',
          borderColor: '#999',
        }}
        inputMode="numeric"
        keyboardType="number-pad"
        value={String(value)}
        onChangeText={text => setValue(text)}
      />
      <ColorButton
        onPress={() => props.confirm && props.confirm(value)}
        backgroundColor={'white'}
        title={'提交预约'}
        color={'black'}
        fontSize={rem(10)}
        height={hp(4)}
        containerStyle={{
          marginHorizontal: wp(1),
          marginBottom: hp(1),
          borderColor: '#CDD1D4',
          borderWidth: 1,
        }}
      />
    </View>
  );
}
